<template>
  <div class="top-style">
    <!-- 调整层 -->
    <div class="new-top">
      <div class="tab-icon">
        <div>
          <img class="tab-icon-style" src="../../assets/tabicon.png" alt="" />
        </div>
      </div>
      <div class="search">
        <div class="search-bar">
         <van-search
  v-model="value"
  shape="round"
  background="rgb(228, 49, 48)"
  placeholder="请输入搜索关键词" style="padding-top:14px;"
/>

          <div class="search-bar-icon">
            <!-- <div>
              <img class="search-bar-icon-style" src="../assets/sicon.png" alt="" />
            </div> -->
          </div>
        </div>
      </div>
      <div class="my-icon">
        <div class="Sign">
         登录
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 预编译 */
/* 自适应 使用% 作为单位  px 配合，rpx */
.top-style{
  z-index: 99;
  position:fixed;
  width: 100%;
  top:0px
}
.new-top {
  height: 62px;
  width: 100%;
  background-color: rgb(228, 49, 48);
}
.tab-icon {
  float: left;
  width: 20%;
}
.tab-icon-style {
  width: 55px;
  height: 55px;
  padding-top: 12px;
  padding-left: 15px;
  padding-bottom: 7px;
}
.search {
  float: left;
  width: 60%;
}
.search-bar {
  
}
.my-icon {
  float: left;
  width: 20%;
}
.search-bar-logo {
  float: left;
  width: 20%;
  font-size: 28px;
  color: rgb(228, 49, 48);
}
.search-bar-text {
  float: left;

  width: 50%;
}
.search-bar-icon {
  float: left;

  width: 20%;
}
.search-bar-icon-style{
  width: 28px;
  height: 28px;  
}
.Sign{
  padding-top: 16px; 
  padding-left:0px;
  color: #ffffff;
  font-weight:bold;
  font-size:22px ;
  float: left;
}
</style>